import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './InterviewList.css';

const InterviewSimulation: React.FC = () => {
    const [pdfUploaded, setPdfUploaded] = useState(false);
    const [simulateStarted, setSimulateStarted] = useState(false);
    const [keywords, setKeywords] = useState<string[]>([]);
    const [questions, setQuestions] = useState<string[]>([]);
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [answers, setAnswers] = useState<string[]>([]);
    const navigate = useNavigate();

    const handlePdfUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setTimeout(() => {
                setPdfUploaded(true);
                setKeywords(['Redis', '缓存', '性能优化']);
                setQuestions([
                    'Redis的基本数据类型有哪些？使用场景是什么？',
                    '如何优化Redis性能？',
                    'Redis的持久化机制有哪些？',
                ]);
                setAnswers(Array(3).fill(''));
            }, 1000);
        }
    };

    const handleSimulateInterview = () => {
        if (!pdfUploaded) {
            alert('请先上传PDF简历！');
            return;
        }
        setSimulateStarted(true);
    };

    const nextQuestion = () => {
        if (currentQuestionIndex < questions.length - 1) {
            setCurrentQuestionIndex(currentQuestionIndex + 1);
        }
    };

    const prevQuestion = () => {
        if (currentQuestionIndex > 0) {
            setCurrentQuestionIndex(currentQuestionIndex - 1);
        }
    };

    const handleSubmit = () => {
        if (answers.some((answer) => !answer.trim())) {
            alert('请回答所有问题后提交！');
            return;
        }
        navigate('/initer-result', { state: { answers, keywords } });
    };

    const handleHistory = () => {
        navigate('/history');
    };

    return (
        <div className="container">
            <div className="left-panel">
                <h2>上传简历</h2>
                {!pdfUploaded ? (
                    <div className="upload-box">
                        <label htmlFor="pdfUpload" className="upload-label">
                            点击上传PDF简历
                        </label>
                        <input
                            type="file"
                            id="pdfUpload"
                            accept=".pdf"
                            onChange={handlePdfUpload}
                            style={{ display: 'none' }}
                        />
                    </div>
                ) : (
                    <div className="success-box">
                        <p>PDF简历上传成功！</p>
                    </div>
                )}
                <button className="simulate-btn" onClick={handleSimulateInterview}>
                    开始模拟面试
                </button>
            </div>

            <div className="right-panel">
                {simulateStarted ? (
                    <>
                        <div className="keywords">
                            <h3>关键字</h3>
                            <p>{keywords.join(', ') || '暂无关键字'}</p>
                        </div>
                        <div className="questions">
                            <h3>题目</h3>
                            <p>{questions[currentQuestionIndex] || '暂无题目'}</p>
                            <textarea
                                className="answer-box"
                                placeholder="在这里输入你的答案..."
                                value={answers[currentQuestionIndex] || ''}
                                onChange={(e) => {
                                    const updatedAnswers = [...answers];
                                    updatedAnswers[currentQuestionIndex] = e.target.value;
                                    setAnswers(updatedAnswers);
                                }}
                            />
                        </div>
                        <div className="controls">
                            <button onClick={prevQuestion} disabled={currentQuestionIndex === 0}>
                                上一题
                            </button>
                            <button onClick={nextQuestion} disabled={currentQuestionIndex === questions.length - 1}>
                                下一题
                            </button>
                        </div>
                        <div className="pagination">
                            {questions.map((_, index) => (
                                <button
                                    key={index}
                                    className={`page-button ${currentQuestionIndex === index ? 'active' : ''}`}
                                    onClick={() => setCurrentQuestionIndex(index)}
                                >
                                    {index + 1}
                                </button>
                            ))}
                        </div>
                        <button className="simulate-btn" onClick={handleSubmit}>
                            提交并分析
                        </button>
                    </>
                ) : (
                    <p className="placeholder-text">请点击“开始模拟面试”以显示内容</p>
                )}
            </div>

            <div className="botom-panel">
                <button className="botombtn" onClick={handleHistory}>
                    面试记录
                </button>
            </div>
        </div>
    );
};

export default InterviewSimulation;
